<template>
  <div>
    <div class="carousel_wrap">
      <el-carousel ref="carouselRef" :interval="0" indicator-position="none" :autoplay="false" arrow="always"
        @change="carouselChange">
        <el-carousel-item v-for="item in list" :key="item.title">
          <div class="info_wrap" v-if="item.title || item.msgs">
            <div class="info_title">{{ item.title }}</div>
            <div class="info_msg" v-for="(it, idx) in item.msgs" :key="idx">{{ it }}</div>
          </div>
          <div class="img_wrap">
            <img class="img" :src="item.src" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="indicator_wrap">
      <div v-for="(item, idx) in list" :key="item.title" :class="{
        indicator_item: true,
        active_indicator_item: indicatorIdx === idx
      }" @click="setCarouselItem(idx)">
        <div v-if="item.title" class="title">{{ item.title }}</div>
        <div class="ind"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data: () => ({
    indicatorIdx: 0
  }),
  methods: {
    carouselChange(index) {
      this.indicatorIdx = index
    },
    setCarouselItem(index) {
      this.$refs.carouselRef.setActiveItem(index)
    }
  }
}
</script>

<style scoped>
.carousel_wrap {
  /* width: 21.86rem; */
  height: 14.37rem;
  /* margin: 0 auto; */
}

.carousel_wrap>>>.el-carousel,
.el-carousel__container,
.el-carousel__item {
  height: 100% !important;
  width: 100%;
  overflow: hidden;
}

.carousel_wrap>>>.el-carousel__container {
  height: 100% !important;
}

.carousel_wrap>>>.el-carousel__arrow {
  width: 0.76rem;
  height: 0.76rem;
  font-size: 0.4rem;
  background-color: rgba(255, 255, 255, 0.6);
}

.carousel_wrap>>>.el-carousel__arrow--left {
  left: 1.8rem;
}

.carousel_wrap>>>.el-carousel__arrow--right {
  right: 1.8rem;
}

.indicator_wrap {
  position: absolute;
  bottom: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  cursor: pointer;
}

.indicator_item:hover .ind {
  opacity: 1;
}

.indicator_item:hover .title {
  color: #fff;
}

.ind {
  width: 1.8rem;
  height: 0.08rem;
  background: #fff;
  transition: all .1s;
  border-radius: 2px;
  margin: 0 0.16rem;
  opacity: .4;
}

.indicator_item .title {
  text-align: center;
  color: hsla(0, 0%, 100%, .4);
  opacity: 1;
  background: transparent;
  margin: 0 0.2rem;
  font-size: .4rem;
  position: relative;
}

.active_indicator_item .ind {
  opacity: 1;
}

.active_indicator_item .title {
  color: #fff;
}

.indicator_item .desc {
  font-size: 0.3rem;
  line-height: 0.5rem;
}

.info_wrap {
  position: absolute;
  top: 1.39rem;
  left: 2rem;
}
.info_title {
  font-size: .9rem;
  line-height: 1.2rem;
  margin-bottom: 0.6rem;
  color: #fff;
}
.info_msg {
  font-size: .3rem;
  line-height: .5rem;
  color: #fff;
}
</style>